<div class="cil__base-block">
  <img class="cil__top-image" src="assets/images/centaur/change.svg" />

  <form  class="cil__base-block--form" [formGroup]="validateForm" nz-form>
    <ng-container *ngIf="dualMessageSwitch$ | async">
      <app-detail-header
        [title]="('BIZ.ACQUIRER.ACQUIRER_FUNC.SINGLE_MESSAGE' | i18n) + '/' + ('BIZ.ACQUIRER.ACQUIRER_FUNC.DUAL_MESSAGE' | i18n)"
        [hideIcon]="true"
      ></app-detail-header>

      <div nz-row [nzGutter]="24">
        <div nz-col [nzSpan]="12">
          <nz-form-item>
            <nz-form-label>{{trans('VALIDATION.ISSUPPORT', { name: trans('BIZ.ACQUIRER.ACQUIRER_FUNC.DUAL_MESSAGE')})}}</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="isSupportDualMessage">
                <label nz-radio nzValue="0">{{'BIZ.ACQUIRER.ACQUIRER_FUNC.SINGLE_MESSAGE' | i18n}}</label>
                <label nz-radio nzValue="1">{{'BIZ.ACQUIRER.ACQUIRER_FUNC.DUAL_MESSAGE' | i18n}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <ng-container *ngIf="dualMessageCtrl?.value === '1'">
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="12">
            <nz-form-item>
              <nz-form-label>{{trans('BIZ.STORE.OTHER.SETTLEMENT.SETTLE_TIME')}}</nz-form-label>
              <nz-form-control>
                <nz-select
                formControlName="settleTime"
                name="settleTime"
                [nzAllowClear]="false"
              >
                <nz-option
                  *ngFor="let op of settleTimeOptions"
                  [nzLabel]="op.label"
                  [nzValue]="op.value"
                  nzCustomContent
                >
                  <span>{{op.label}}</span>
                </nz-option>
              </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        
      </ng-container>
    </ng-container>
    
    <app-detail-header
      [title]="'BIZ.STORE.OTHER.SETTLEMENT.PERIOD_CONFIG' | i18n"
      [hideIcon]="true"
    ></app-detail-header>
    <ng-container>
      <app-store-new-settlement-period-config [group]="validateForm"></app-store-new-settlement-period-config>
    </ng-container>

    <app-detail-header
      [title]="'BIZ.STORE.OTHER.SETTLEMENT.ACCOUNT_CONFIG' | i18n"
      [hideIcon]="true"
    ></app-detail-header>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="12" *ngFor="let item of formItems">
        <nz-form-item>
          <nz-form-label>{{item.label}}</nz-form-label>
          <nz-form-control nzHasFeedback="true">
            <input nz-input [formControlName]="item.formControlName" [name]="item.formControlName" />
            <nz-form-explain *ngIf="validateForm.get(item.formControlName).dirty">
              <ng-container *ngIf="validateForm.get(item.formControlName).getError('required');else second">{{item.errTips['required']}}</ng-container>
              <ng-template #second>
                <ng-container *ngIf="validateForm.get(item.formControlName).getError('minlength');else third">{{item.errTips['minLength']}}</ng-container>
              </ng-template>
              <ng-template #third>
                <ng-container *ngIf="validateForm.get(item.formControlName).getError('maxlength');else fourth">{{item.errTips['maxLength']}}</ng-container>
              </ng-template>
              <ng-template #fourth>
                <ng-container *ngIf="validateForm.get(item.formControlName).getError('pattern'); else fifth">{{item.errTips['pattern']}}</ng-container>
              </ng-template>
              <ng-template #fifth>
                <ng-container *ngIf="validateForm.get(item.formControlName).errors && item.errTip">{{item.errTip}}</ng-container>
              </ng-template>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>


